@use "sass:math";

body {
  background: black;
}

$size: 200px;
$r: $size / 2;
$n: 6;
$deg: 360deg / $n;
$R: $r / math.sin($deg / 2);
$innerSize: $R * 2;


.container {
  width: $size;
  height: $size;
  outline: 5px solid #fff;
  margin: 50px auto;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  overflow: hidden;

  .inner {
    width: $innerSize;
    height: $innerSize;
    //background: red;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: $r;
    position: relative;

    img {
      width: $size;
      height: $size;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      margin-left: -$r;
      margin-top: -$r;
      transform-origin: center #{$R + $r};
      @for $i from 1 through $n {
        &:nth-child(#{$i}) {
          transform: rotate($deg * ($i - 1));
        }
      }
    }
  }
}

$percent: 1 / $n * 100%;
$rotateDuration: 0.3s;
$stopDuration: 1s;
$duration: ($rotateDuration + $stopDuration) * $n;
$backPercent: $stopDuration / ($stopDuration + $rotateDuration) * $percent;
@keyframes rotating {
  @for $i from 1 through $n {
    $p: $percent * $i;
    #{$p - $backPercent}, #{$p} {
      transform: rotate(-$i * $deg);
    }
  }
}

.inner {
  animation: rotating $duration ease-in infinite;
}